<template>
	<div class="sys-user-container">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.account')" prop="account" :rules="[{ required: true, message: $t('system.user.accountRequired'), trigger: 'blur' }]">
								<el-input v-model="state.ruleForm.account" :placeholder="$t('system.user.account')" :disabled="state.ruleForm.id > 0" clearable />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.nickName')">
								<el-input v-model="state.ruleForm.nickName" :placeholder="$t('system.user.nickName')" clearable />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="真实姓名" prop="realName" :rules="[{ required: true, message: '真实姓名不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.realName" placeholder="真实姓名" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.phone')" prop="phone"  >
								<el-input v-model="state.ruleForm.phone" :placeholder="$t('system.user.phone')" clearable />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.sex')">
								<g-sys-dict v-model="state.ruleForm.sex" code="GenderEnum" render-as="radio" />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.birthday')" prop="birthday">
								<el-date-picker v-model="state.ruleForm.birthday" type="date" :placeholder="$t('system.user.birthday')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="w100" />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.adminType')" prop="adminType" :rules="[{ required: true, message: $t('system.user.adminTypeRequired'), trigger: 'blur' }]">
								<g-sys-dict
									v-model="state.ruleForm.adminType"
									:on-item-filter="(data: any) => data.code != 'SuperAdmin' && (data.code == 'SysAdmin' ? AccountTypeEnum.NUMBER_SuperAdmin == userInfos.accountType : true)"
									code="AccountTypeEnum"
									render-as="select"
								/>
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.status')" prop="isDisable" :rules="[{ required: true, message: $t('system.user.statusRequired'), trigger: 'blur' }]">
								<el-radio-group v-model="state.ruleForm.isDisable">
									<el-radio :value="0">{{ $t('system.user.enable') }}</el-radio>
									<el-radio :value="1">{{ $t('system.user.disable') }}</el-radio>
								</el-radio-group>
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.email')">
								<el-input v-model="state.ruleForm.email" :placeholder="$t('system.user.email')" clearable />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item :label="$t('system.user.remark')">
								<el-input v-model="state.ruleForm.remark" :placeholder="$t('system.user.remark')" clearable type="textarea" />
							</el-form-item>
					</el-col>
					<el-divider border-style="dashed" content-position="center">
							<div style="color: #b1b3b8">{{ $t('system.user.orgInfo') }}</div>
						</el-divider>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.org')" prop="orgId" :rules="[{ required: true, message: $t('system.user.orgRequired'), trigger: 'blur' }]">
								<el-cascader :options="state.orgData" v-model="state.ruleForm.orgId" :props="cascaderProps" :placeholder="$t('system.user.org')" clearable filterable class="w100">
									<template #default="{ node, data }">
										<span>{{ data.name }}</span>
										<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
									</template>
								</el-cascader>
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.pos')" prop="posId" :rules="[{ required: true, message: $t('system.user.posRequired'), trigger: 'blur' }]">
								<el-select v-model="state.ruleForm.posId" :placeholder="$t('system.user.pos')" class="w100">
									<el-option v-for="d in state.posData" :key="d.id" :label="d.name" :value="d.id" />
								</el-select>
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.jobNum')">
								<el-input v-model="state.ruleForm.jobNum" :placeholder="$t('system.user.jobNum')" clearable />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.domainAccount')">
								<el-input v-model="state.ruleForm.domainAccount" :placeholder="$t('system.user.domainAccount')" clearable />
							</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item :label="$t('system.user.joinDate')">
								<el-date-picker v-model="state.ruleForm.joinDate" type="date" :placeholder="$t('system.user.joinDate')" format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="w100" />
							</el-form-item>
					</el-col>
					<el-divider border-style="dashed" content-position="center">
							<div style="color: #b1b3b8">{{ $t('system.user.extOrg') }}</div>
						</el-divider>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
							<el-button icon="ele-Plus" type="primary" plain @click="addExtOrgRow"> {{ $t('system.user.addExtOrg') }} </el-button>
							<span style="font-size: 12px; color: gray; padding-left: 5px"> {{ $t('system.user.extOrgTip') }} </span>
						</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<template v-if="state.ruleForm.extOrgIdList != undefined && state.ruleForm.extOrgIdList.length > 0">
							<el-row :gutter="35" v-for="(v, k) in state.ruleForm.extOrgIdList" :key="k">
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="机构" :prop="`extOrgIdList[${k}].orgId`" :rules="[{ required: true, message: `机构不能为空`, trigger: 'blur' }]">
										<template #label>
										<el-button icon="ele-Delete" type="danger" circle plain size="small" @click="deleteExtOrgRow(k)" />
										<span class="ml5">{{ $t('system.user.org') }}</span>
									</template>
										<el-cascader :options="props.orgData" :props="cascaderProps" placeholder="机构组织" clearable filterable class="w100" v-model="state.ruleForm.extOrgIdList[k].orgId">
											<template #default="{ node, data }">
												<span>{{ data.name }}</span>
												<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
											</template>
										</el-cascader>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
									<el-form-item label="职位" :prop="`extOrgIdList[${k}].posId`" :rules="[{ required: true, message: `职位不能为空`, trigger: 'blur' }]">
										<el-select v-model="state.ruleForm.extOrgIdList[k].posId" placeholder="职位名称" class="w100">
											<el-option v-for="d in state.posData" :key="d.id" :label="d.name" :value="d.id" />
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<el-empty :image-size="50" description="空数据" v-else></el-empty>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
					<span class="dialog-footer">
						<el-button @click="cancel">{{ $t('system.user.cancel') }}</el-button>
						<el-button type="primary" @click="submit">{{ $t('system.btn.confirm') }}</el-button>
					</span>
				</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="sysEditUser">
import { onMounted, reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { AccountTypeEnum } from '/@/api-services/enum';
import { apiSysPosListGet,apiSysUserOwnExtOrgListUserIdGet,apiSysUserUpdatePost,apiSysUserAddPost } from '/@/api-services/api';

const { t } = useI18n();

const props = defineProps({
	title: String,
	orgData: Array<any>,
});
const emits = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo);
const state = reactive({
	loading: false,
	isShowDialog: false,
	orgData: [] as Array<any>,
	ruleForm: {} as any,
	posData: [] as Array<any>, // 职位数据
});
// 级联选择器配置选项
const cascaderProps = { checkStrictly: true, emitPath: false, value: 'id', label: 'name', expandTrigger: 'hover' };

onMounted(async () => {
	state.loading = true;
	var res = await apiSysPosListGet();
	state.posData = res.data.data ?? [];
	state.loading = false;
});

// 打开弹窗
const openDialog = async (row: any) => {
	state.orgData = (props.orgData) ?? [];
	state.posData = (state.posData) ?? [];
	ruleFormRef.value?.resetFields();
	state.ruleForm = JSON.parse(JSON.stringify(row));
	if (row.id != undefined) {
		var resExtOrg = await  apiSysUserOwnExtOrgListUserIdGet(row.id);
		state.ruleForm.extOrgIdList = resExtOrg.data.data;
	} 
	else state.ruleForm.accountType = 0; // 默认普通账号类型
	state.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
	emits('handleQuery');
	state.isShowDialog = false;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 提交
const submit = () => {
	ruleFormRef.value.validate(async (valid: boolean) => {
		if (!valid) return;
		if (state.ruleForm.id != undefined && state.ruleForm.id > 0) {
			await apiSysUserUpdatePost(state.ruleForm);
		} else {
			await apiSysUserAddPost(state.ruleForm);
		}
		closeDialog();
	});
};

// 增加附属机构行
const addExtOrgRow = () => {
	if (state.ruleForm.extOrgIdList == undefined) state.ruleForm.extOrgIdList = [];
	state.ruleForm.extOrgIdList?.push({});
};

// 删除附属机构行
const deleteExtOrgRow = (k: number) => {
	state.ruleForm.extOrgIdList?.splice(k, 1);
};

// 导出对象
defineExpose({ openDialog });
</script>
